<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
          position: relative;
          margin-top: 10px;
        }
        .text-input {
          height: 35px;
        }
        /*标签样式*/
        .container-label {
          position: absolute;
          left: 8px;
          top: 0;
          opacity: 0; /*默认隐藏*/
          transition: all 200ms; /*属性变化时，过渡动画*/
        }
        /*当未显示输入的占位符时*/
        .text-input:not(:placeholder-shown) + .container-label {
          background: #fff;
          transform: translate(0, -50%);
          opacity: 1;
        }
      </style>
</head>
<body>
    <div class="container">
        <input placeholder="用户名" class="text-input" />
        <label class="container-label">用户名</label>
      </div>
      <div class="container">
        <input type="password" placeholder="密码" class="text-input" />
        <label class="container-label">密码</label>
      </div>
</body>
</html>